<template>

  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="信函模板一" name="lt-first">
      <letter-temp-one id="letter-one" ref="letter-one"></letter-temp-one>
      <div class="btns">
        <el-button @click="lt1PrintClick">打印</el-button>
        <el-button @click="lt1PrintDataClick">套打</el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane label="信函模板二" name="lt-second">
      <letter-temp-two id="letter-two" ref="letter-two"></letter-temp-two>
      <div class="btns">
        <el-button @click="lt2PrintClick">打印</el-button>
        <el-button @click="lt2PrintDataClick">套打</el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane label="信函模板三" name="lt-third">
      <letter-temp-three id="letter-three" ref="letter-three"></letter-temp-three>
      <div class="btns">
        <el-button @click="lt3PrintClick">打印</el-button>
        <el-button @click="lt3PrintDataClick">套打</el-button>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>
<script>
  import LetterTempOne from '@/views/smart-acc/LetterTempOne'
  import LetterTempTwo from '@/views/smart-acc/LetterTempTwo'
  import LetterTempThree from '@/views/smart-acc/LetterTempThree'
  export default {
    name: 'letter-print',
    data() {
      return {
        activeName: 'lt-first'
      }
    },
    methods: {
      /**
       * 信函模板二打印单击事件
       */
      lt2PrintClick() {
        console.log('lt2PrintClick()')
        setTimeout(() => {
          var nWindow = window.open('.')
          var content = this.$refs['letter-two'].$el.innerHTML
          nWindow.document.write(content)
          console.log(nWindow.document)
          nWindow.print()
          nWindow.close()
        }, 500)
      },
      /**
       * 信函模板二套打单击事件
       */
      lt2PrintDataClick() {
        console.log('m2PrintDataClick()')
        this.$refs['letter-two'].l2_changeStyle()
        setTimeout(() => {
          var nWindow = window.open('.')
          var content = this.$refs['letter-two'].$el.innerHTML
          nWindow.document.write(content)
          console.log(nWindow.document)
          nWindow.print()
          nWindow.close()
        }, 500)
        setTimeout(() => {
          this.$refs['letter-two'].refreshPage2()
        }, 500)
      },
      /**
       * 信函模板一打印单击事件
       */
      lt1PrintClick() {
        var newWindow = window.open('.')
        var docStr = this.$refs['letter-one'].$el.innerHTML
        newWindow.document.write(docStr)
        newWindow.document.close()
        newWindow.print()
        newWindow.close()
      },
      /**
       * 信函模板一套打单击事件
       */
      lt1PrintDataClick() {
        this.$refs['letter-one'].lt1ChangeStyle()
        setTimeout(() => {
          var newWindow = window.open('.')
          var docStr = this.$refs['letter-one'].$el.innerHTML
          newWindow.document.write(docStr)
          // newWindow.document.close()
          newWindow.print()
          newWindow.close()
        }, 500)
        setTimeout(() => {
          this.$refs['letter-one'].refreshPage()
        }, 500)
      },
      /**
       * 信函模板三打印单击事件
       */
      lt3PrintClick() {
        setTimeout(() => {
          var newWindow = window.open('.')
          var docStr = this.$refs['letter-three'].$el.innerHTML
          newWindow.document.write(docStr)
          newWindow.document.close()
          newWindow.print()
          newWindow.close()
        }, 500)
      },
      /**
       * 信函模板三套打单击事件
       */
      lt3PrintDataClick() {
        this.$refs['letter-three'].l3_changeStyle()
        setTimeout(() => {
          var newWindow = window.open('.')
          var docStr = this.$refs['letter-three'].$el.innerHTML
          newWindow.document.write(docStr)
          newWindow.document.close()
          newWindow.print()
          this.$refs['letter-three'].l3_originStyle()
          newWindow.close()
        }, 500)
      },
      handleClick(tab, event) {}
    },
    activated() {
      // this.$store.commit('updatePrintInfo', {})
      // this.$store.commit('symbol', {})
    },
    components: {
      LetterTempOne,
      LetterTempTwo,
      LetterTempThree
    }
  }

</script>
<style lang="less" scoped>


</style>
